<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>AI+应用设计创新大赛</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--====== Favicon Icon ======-->
    <link rel="shortcut icon" href="/images/favicon.png" type="image/png">
    <!--====== Bootstrap CSS ======-->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!--====== default CSS ======-->
    <link rel="stylesheet" href="/css/default.css">
    <link rel="stylesheet" href="/font/bootstrap-icons.css">

    <link rel="stylesheet" href="/js/layui/css/layui.css">
    <!--====== Style CSS ======-->
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/main.css">
    <style>
        label.error{
            color: red;
            width: auto;
        }
    </style>
</head>
<body>
    <div class="container">
<!--        <div th:insert="common/mainHeader :: main_header"></div>-->
        <div class="main_frame">
            <div class="main_left">
                <ul>
                    <li>
                        <a th:href="@{/main}">
                            用户列表
                        </a>
                    </li>
                    <li class="active">
                        <a th:href="@{/uis/judgesUI}">
                            评委列表
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/uis/scoreOptionsUI}">
                            评分选项
                        </a>
                    </li>
                </ul>
            </div>
            <div class="main_right">
                <div class="main_right_container">
                    <div class="main_right_title">
                        <p><i class="bi bi-house-fill" style="font-size: 0.9rem;"></i>评委列表</p>
                    </div>
                    <div class="right_table">
                        <div class="table_form search">
                            <input type="button" class="btn btn-info" id="add" th:value="添加">
                        </div>
                        <div class="table_form">
                            <div class="layui-tab layui-tab-card">
                                <ul class="layui-tab-title">
                                    <li class="layui-this" lay-id="1">第一赛场</li>
                                    <li lay-id="2">第二赛场</li>
                                    <li lay-id="3">第三赛场</li>
                                    <li lay-id="4">第四赛场</li>
                                </ul>
                                <div class="layui-tab-content" style="height: 400px;">
                                    <div class="layui-tab-item layui-show">
                                        <input type="button" class="btn btn-info addPlayer" th:value="添加选手">
                                    </div>
                                    <div class="layui-tab-item">
                                        <input type="button" class="btn btn-info addPlayer" th:value="添加选手">
                                    </div>
                                    <div class="layui-tab-item">
                                        <input type="button" class="btn btn-info addPlayer" th:value="添加选手">
                                    </div>
                                    <div class="layui-tab-item">
                                        <input type="button" class="btn btn-info addPlayer" th:value="添加选手">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--====== Jquery js ======-->
    <script src="/js/jquery-1.12.4.min.js"></script>
    <script src="/js/modernizr-3.7.1.min.js"></script>

    <!--====== Bootstrap js ======-->
    <script src="/js/bootstrap.min.js"></script>

    <script src="/js/sweetalert.min.js"></script>
    <script src="/js/jquery-validate.js"></script>

    <!--====== layerUI js ======-->
    <script src="/js/layui/layui.js"></script>

    <script src="/js/common.js"></script>
    <script type="text/javascript" th:inline="javascript">
        layui.use('element', function () {
            const element = layui.element;

            $(document).ready(function(){
                $('.addPlayer').click(function(){
                    const initialSelectedTab = $('.layui-this');
                    const initialTabLayId = initialSelectedTab.attr('lay-id');
                    $.ajax({
                        url: '/team/list',
                        type: 'GET',
                        success: function (data) {
                            // 模拟的表格数据
                            let contentHtml = '<table><tr><th></th><th>姓名</th><th>手机号</th></tr><tbody>';
                            data.data.forEach(function (info) {
                                contentHtml +='<tr><td><input type="checkbox" name="ids" value="' + info.id + '"></td>' +
                                    '<td>'+info.name+'</td>' +
                                    '<td>'+info.phone+'</td></tr>'
                            });
                            contentHtml += '</tbody></table>';
                            layer.open({
                                type: 1,
                                title: '赛场添加选手',
                                area: ['400px', '600px'],
                                content: contentHtml,
                                btn: ['保存', '取消'],
                                yes: function (index, layero) {
                                    // 获取所有选中的复选框
                                    const checkedBoxes = $('input[type="checkbox"]:checked');
                                    // 创建一个空数组用于存储选中复选框的值
                                    const checkedValues = [];

                                    // 遍历所有选中的复选框，将其值添加到数组中
                                    checkedBoxes.each(function () {
                                        checkedValues.push($(this).val());
                                    });

                                    const formData = {
                                        'groundId': initialTabLayId,
                                        'ids': checkedValues
                                    };

                                    console.log(formData);

                                    $.ajax({
                                        url: '/teamOrder',
                                        type: 'POST',
                                        contentType: 'application/json',
                                        data: JSON.stringify(formData),
                                        success: function (result) {
                                            layer.msg('保存成功');
                                            layer.closeAll();
                                        },
                                        error: function (error) {
                                            layer.msg('保存失败：' + error.responseText);
                                        }
                                    });
                                },
                                cancel: function () {
                                    layer.closeAll();
                                }
                            })
                        },
                        error: function (error) {
                            layer.msg('保存失败：' + error.responseText);
                        }
                    });
                })
            })

        })
    </script>
</body>
</html>
